<template>
	<view  class="manage_sorting" >
		<block v-if="!mStatus">
		<view class="section_title">
			<view class="sec_left">我的权益卡</view>
			<view class="sec_right" @click="mStatus = true">
				管理
			</view>
		</view>
		<view class="section">
			<view class="section_li" v-for="(el,elindex) in jamList" :key="elindex" @click="jumpEquityCard(el.customerCardId)">
				<view class="top_left">
					<image :src="el.merchantIcon?el.merchantIcon:'/static/index/card_item04.png'" mode="aspectFill">
					</image>
					<view class="top_left_word">
						<view class="left_box">
							<text class="top_left_word01">{{el.merchantName}}</text>
							<view class="top_left_number">{{el.cardNum}}张</view>
						</view>
						<view class="right_box">
							<view class="card_header_right">
								<text class="left_01">编号</text>
								<text class="left_02">{{el.cardNo}}</text>
							</view>
							<view class="expand-number" @click.stop="myOpen(el)">
								展开编号<image src="/static/newsImg/my_right.png"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="section_li_box">
					<image class="imgBox" :src="el.cover"></image>
					<image class="imgBox2" :src="el.cover" mode="heightFix"></image>
					<view class="sec_li_info">
						<view class="info_top">
							<view class=""></view>
							<view class="top_right ellipseHide">
								持卡{{el.days}}天
							</view>
						</view>
						<view class="info_bottom ellipseHide" :style="{'background':el.color}">
							{{el.cardName}}
						</view>
					</view>
				</view>
			</view>
		</view>
		</block>
		<!-- 管理设置 -->
		<manage-sorting v-if="mStatus" :manData="jamList" @confirmInfo='confirmInfo' @myOpen='myOpen' @dialogClose="dialogClose"></manage-sorting>
		<uni-popup ref="popup" type="center" style="z-index:999;">
			<view class="popupBox">
				<view class="pTitle">{{equityTitle}}</view>
				<view class="pSubtitle">卡片编码</view>
				<view class="pListBox" v-if="equityIssueStatus == 1">
					<view class="pListBox_li">
						<view class="li_item">编号</view>
						<view class="li_item">我的权益</view>
					</view>
					<scroll-view scroll-y="true" class="scrollView">
						<block v-if="userList.length > 0">
							<view class="pListBox_li" v-for="(item,index) in userList" :key="index"
								@click="jumpEquityCard(item.id)">
								<view class="li_item colo_333333">{{item.cardNo}}</view>
								<view class="li_item colo_999999" :class="{'colo_333333':item.status == '已激活'}">
									{{item.status}}</view>
							</view>
						</block>
						<block v-else>
							<view class="pListBox_li"
								style="padding: 0 10rpx;width: 100%;display: flex;justify-content: center;">
								暂无数据
							</view>
						</block>
					</scroll-view>
				</view>
				<view class="pListBox" v-if="equityIssueStatus == 2" style="width: 256rpx;">
					<view class="pListBox_li">
						<view class="li_item" style="width: 100%; border: unset;">编号</view>
					</view>
					<scroll-view scroll-y="true" class="scrollView">
						<block v-if="userList.length > 0">
							<view class="pListBox_li" v-for="(item,index) in userList" :key="index"
								@click="jumpEquityCard(item.id)">
								<view class="li_item colo_333333" style="width: 100%; border: unset;">{{item.cardNo}}
								</view>
							</view>
						</block>
						<block v-else>
							<view class="pListBox_li"
								style="padding: 0 10rpx;width: 100%;display: flex;justify-content: center;">
								暂无数据
							</view>
						</block>
					</scroll-view>
				</view>
		
				<view class="know" @click="close">
					返回
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mText: '管理',
				jamList: [],
				mStatus:false,
				userList: [],
				equityTitle: '', //卡标题
				equityIssueStatus: 1, //1开始 2 关闭
			};
		},
		onLoad() {
			this.getCustomerCardList()
		},
		methods: {
			// 获取卡包卷
			getCustomerCardList() {
			    var data = {
			        functionType: this.functionType
			    }
				this.$api.getCustomerCardList(data).then(res => {
					var resdata = res.result
					this.jamList = res.result
				})
			},
			// 取消
			dialogClose(){
				this.mStatus = false
			},
			// 刷新页面
			confirmInfo() {
			   this.mStatus = false
               this.getCustomerCardList()
			},
			// 展开编号
			async myOpen(item) {
				var data = {
					equityCardId: item.id
				}
				this.equityTitle = item.cardName
				this.equityIssueStatus = item.equityIssueStatus
				var res = await this.$api.getCardNoList(data)
				this.userList = res.result
				this.$refs.popup.open()
			},
			// equityCard(el, index) {
			// 	this.jumpEquityCard(el.customerCardId)
			// },
			jumpEquityCard(id) {
				this.close()
				uni.navigateTo({
					url: '/pages/my/equity-card/equity-card?id=' + id
				})
			},
			close() {
				this.$refs.popup.close()
			},
		}
	}
</script>

<style scoped>
	.manage_sorting{
		width: 100%;
		height: 100vh;
	}
	.opacityClass{
		opacity:.5;
	}
	/* 我的卡包券 */
	.section {
		width: 686rpx;
		margin: 0 auto;
		padding:120rpx 0;
		box-sizing: border-box;
		/* padding: 0 32rpx; */
	}

	.section_title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		top: 0rpx;
		width: 100%;
		background: #F8FBFF;
		box-sizing: border-box;
		padding: 20rpx 46rpx;
		z-index: 55;
	}
	.sec_left {
		font-size: 34rpx;
		line-height: 44rpx;
		color: #000000;
	}

	.sec_right {
		font-weight: 400;
		font-size: 30rpx;
		color: #1557F2;

	}

	.section_button {
		font-size: 28rpx;
		color: #0B87F2;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		height: 68rpx;
		background: #FFFFFF;
		box-shadow: 0px 8rpx 8rpx #F3F3F3;
		border-radius: 200rpx;
		margin: 0 auto;
	}

	.section_button image {
		width: 28rpx;
		height: 16rpx;
		margin-left: 4rpx;
		margin-top: 4rpx;
		transform: rotate(180deg);
		/* transition: all 0.2s; */
	}

	.openClass image {
		transform: rotate(0deg);
		transition: all 0.2s;
	}

	.section_li {
		padding: 30rpx 24rpx;
		box-sizing: border-box;
		width: 100%;
		border-radius: 32rpx;
		margin-bottom: 30rpx;
		background: #FFFFFF;
		box-shadow: 4rpx 4rpx 12rpx #EEEEEE;
	}

	.section_li_box {
		position: relative;
		width: 100%;
		height: 314rpx;
		background-repeat: no-repeat;
		background-size: cover;

		border-radius: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.section_li .imgBox {
		filter: blur(5px);
		width: 100%;
		height: 314rpx;

		/* border-radius: 24rpx; */
	}

	.imgBox2 {
		height: 100%;
		position: absolute;
		z-index: 2;
	}

	.section_li .sec_li_info {
		position: absolute;
		top: 0;
		width: 100%;
		height: 314rpx;
		z-index: 3;
		border-radius: 24rpx;
	}

	.info_top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-top: 24rpx;
	}

	.top_left {
		/* padding-left: 24rpx; */
		display: flex;
		flex-direction: row;
		font-size: 26rpx;
		color: #000000;
		margin-bottom: 26rpx;

	}

	.top_left image {
		width: 68rpx;
		height: 68rpx;
		margin-right: 22rpx;
		border-radius: 50%;
	}

	.top_left .top_left_word {
		display: flex;
		flex-direction: column;
	}

	.right_box,
	.left_box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.left_box {
		width: 540rpx;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.top_left_number {
		border: 2rpx solid #F1C984;
		border-radius: 200rpx;
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #CD8200;
	}

	.right_box .expand-number {
		font-size: 24rpx;
		color: #1557F2;
		margin-left: 16rpx;
	}

	.expand-number image {
		width: 10rpx;
		height: 18rpx;
		margin-left: 4rpx;
	}

	.top_left_word .top_left_word02 {
		font-size: 22rpx;
	}

	.top_right {
		align-self: baseline;
		padding: 4rpx 18rpx;
		font-size: 21rpx;
		color: #FFFFFF;
		background: rgba(0, 0, 0, .3);
		border-radius: 200rpx 0px 0px 200rpx;
	}

	.info_bottom {
		position: absolute;
		width: 100%;
		bottom: 0;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.53) 58.82%);
		border-radius: 0px 0px 24rpx 24rpx;
		font-size: 26rpx;
		line-height: 36rpx;
		color: #FFFFFF;
		padding: 18rpx 24rpx;
		box-sizing: border-box;
	}

	.section_logo {
		width: 100%;
		height: 210rpx;
		background: #FFFFFF;
		font-size: 28rpx;
		color: #000000;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 46rpx;
		box-sizing: border-box;
	}

	.logo_buttom {
		width: 200rpx;
		height: 64rpx;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		border-radius: 12rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		text-align: center;
		line-height: 64rpx;
		margin-top: 20rpx;
	}

	.card_voucher {
		color: #999999;
	}

	.card_header_right {
		display: flex;
		flex-direction: row;
		margin-top: 6rpx;
	}

	.card_header_right text {
		padding: 0 14rpx;
		font-weight: 400;
		font-size: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* line-height: 34rpx; */
	}

	.card_header_right .left_01 {
		color: #824806;
		background: linear-gradient(90deg, #F0C57D 3.45%, #F8E2B1 100%);
		border-radius: 4rpx 0 0 4rpx;
	}

	.card_header_right .left_02 {
		color: #CB7F00;
		border: 1rpx solid #F1C67F;
		border-radius: 0px 4rpx 4rpx 0px;
	}
	.popupBox {
		width: 612rpx;
		background: #fff url('@/static/newsImg/my_number_bg.jpg') no-repeat;
		background-size: 100% auto;
		border-radius: 16rpx;
		padding-bottom: 44rpx;
	}
	
	.popupBox .pTitle {
		padding-top: 50rpx;
		text-align: center;
		width: 100%;
		font-size: 36rpx;
		color: #222222;
	}
	
	.popupBox .pSubtitle {
		font-size: 30rpx;
		color: #222222;
		text-align: center;
		width: 100%;
		margin-top: 14rpx;
		margin-bottom: 34rpx;
	}
	
	.scrollView {
		width: 100%;
		margin: 0 auto;
		max-height: 640rpx;
	}
	
	.popupBox .pListBox {
		width: 512rpx;
		max-height: 724rpx;
		overflow: hidden;
		margin: 0 auto;
		border: 1rpx solid #E6E6E6;
	}
	
	.popupBox .pListBox .pListBox_li {
		width: 100%;
		display: flex;
		flex-direction: row;
		border-bottom: 1rpx solid #E5E5E5;
		color: #333333;
		font-size: 28rpx;
	}
	
	.popupBox .pListBox .pListBox_li .li_item:first-child {
		border-right: 1rpx solid #E5E5E5;
	}
	
	.popupBox .pListBox .pListBox_li:first-child {
		font-size: 30rpx;
		color: #222222;
	}
	
	.popupBox .pListBox .pListBox_li:last-child {
		border-bottom: unset;
	}
	
	.popupBox .pListBox .pListBox_li .li_item {
		width: 50%;
		height: 64rpx;
		color: #222222;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.colo_333333 {
		color: #333333 !important;
	}
	
	.colo_999999 {
		color: #999999 !important;
	}
	
	.popupBox .know {
		width: 200rpx;
		height: 72rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		border-radius: 8px;
		border: 2rpx solid #0B87F2;
		line-height: 72rpx;
		font-size: 30rpx;
		text-align: center;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
	}
	/* end */
</style>
